<template>
  <div class="productQualityPc" v-if="data">
    <div class="home">
      <div class="top-box">
        <div class="name">{{ data?.[0]?.name }}</div>
        <div class="en">{{ data?.[0]?.subtitle }}</div>
        <img class="h-img" :src="data?.[0]?.backwebimage" />
        <div class="content">
          <div class="text">
            <!-- <div v-html="data?.[0]?.contentweb"></div> -->
            {{ data?.[0]?.contentweb }}
          </div>
          <div class="category">
            <router-link
              :to="{ name: this.nav?.[0].rote, query: { name: 'quality' } }"
              class="item"
              :style="{
                'background-image': `url(${data?.[0]?.firstwebimage})`,
              }"
            >
              <div class="t">{{ data?.[0]?.firstimagetitle }}</div>
            </router-link>
            <router-link
              :to="{ name: this.nav?.[0].rote, query: { name: 'herbs' } }"
              class="item"
              :style="{
                'background-image': `url(${data?.[0]?.secondwebimage})`,
              }"
            >
              <div class="t">{{ data?.[0]?.secondimagetitle }}</div>
            </router-link>
          </div>
        </div>
        <router-link :to="{ name: this.nav?.[0].rote }" class="detail">
          <div class="text">查看详情</div>
          <img class="ic" src="../../../assets/image/home/ic_right.png" />
        </router-link>
      </div>

      <div class="bottom-box">
        <div class="name">{{ data?.[1]?.name }}</div>
        <div class="en">{{ data?.[1]?.subtitle }}</div>
        <img class="h-img" :src="data?.[1]?.backwebimage" />
        <div class="product-box">
          <router-link
            :to="{ name: this.nav?.[1].rote, query: { name: 'tx' } }"
            class="item"
            :style="{ 'background-image': `url(${data?.[1]?.firstwebimage})` }"
          >
            <div class="text">
              <span class="t">{{ data?.[1]?.firstimagetitle }}</span>
              <span class="e">{{ data?.[1]?.firstsubtitle }}</span>
            </div>
          </router-link>
          <router-link
            :to="{ name: this.nav?.[1].rote, query: { name: 'zd' } }"
            class="item"
            :style="{ 'background-image': `url(${data?.[1]?.secondwebimage})` }"
          >
            <div class="text">
              <span class="t">{{ data?.[1]?.secondimagetitle }}</span>
              <span class="e">{{ data?.[1]?.secondsubtitle }}</span>
            </div>
          </router-link>
          <router-link
            :to="{ name: this.nav?.[1].rote, query: { name: 'zx' } }"
            class="item"
            :style="{ 'background-image': `url(${data?.[1]?.thirdwebimage})` }"
          >
            <div class="text">
              <span class="t">{{ data?.[1]?.thirdimagetitle }}</span>
              <span class="e">{{ data?.[1]?.thirdsubtitle }}</span>
            </div>
          </router-link>
        </div>
        <router-link :to="{ name: this.nav?.[1].rote }" class="detail">
          <div class="text">查看详情</div>
          <img class="ic" src="../../../assets/image/home/ic_right.png" />
        </router-link>
      </div>
    </div>
  </div>
  <!-- 移动端 -->
  <div class="productQualityM">
    <div class="home">
      <div class="top-box">
        <div class="name">{{ data?.[0]?.name }}</div>
        <div class="en">{{ data?.[0]?.subtitle }}</div>
        <img class="h-img" :src="data?.[0]?.backmobileimage" />
        <div class="content">
          <div class="text">
            <!-- <div v-html="data?.[0]?.contentmobile"></div> -->
            {{ data?.[0]?.contentmobile }}
          </div>
          <div class="category">
            <router-link
              :to="{ name: this.nav?.[0]?.rote, query: { name: 'quality' } }"
              class="item"
              :style="{
                'background-image': `url(${data?.[0]?.firstmobileimage})`,
              }"
            >
              <div class="t">{{ data?.[0]?.firstimagetitle }}</div>
            </router-link>
            <router-link
              :to="{ name: this.nav?.[0]?.rote, query: { name: 'herbs' } }"
              class="item"
              :style="{
                'background-image': `url(${data?.[0]?.secondmobileimage})`,
              }"
            >
              <div class="t">{{ data?.[0]?.secondimagetitle }}</div>
            </router-link>
          </div>
        </div>
        <router-link :to="{ name: this.nav?.[0]?.rote }" class="detail">
          <div class="text">查看详情</div>
          <img class="ic" src="../../../assets/image/home/ic_right.png" />
        </router-link>
      </div>

      <div class="bottom-box">
        <div class="name">{{ data?.[1]?.name }}</div>
        <div class="en">{{ data?.[1]?.subtitle }}</div>
        <img class="h-img" :src="data?.[1]?.backmobileimage" />
        <div class="product-box">
          <router-link
            :to="{ name: this.nav?.[1]?.rote, query: { name: 'tx' } }"
            class="item"
            :style="{
              'background-image': `url(${data?.[1]?.firstmobileimage})`,
            }"
          >
            <div class="text">
              <span class="e">{{ data?.[1]?.firstsubtitle }}</span>
              <span class="t">{{ data?.[1]?.firstimagetitle }}</span>
            </div>
          </router-link>
          <router-link
            :to="{ name: this.nav?.[1]?.rote, query: { name: 'zd' } }"
            class="item"
            :style="{
              'background-image': `url(${data?.[1]?.secondmobileimage})`,
            }"
          >
            <div class="text">
              <span class="e">{{ data?.[1]?.secondsubtitle }}</span>
              <span class="t">{{ data?.[1]?.secondimagetitle }}</span>
            </div>
          </router-link>
          <router-link
            :to="{ name: this.nav?.[1]?.rote, query: { name: 'zx' } }"
            class="item"
            :style="{
              'background-image': `url(${data?.[1]?.thirdmobileimage})`,
            }"
          >
            <div class="text">
              <span class="e">{{ data?.[1]?.thirdsubtitle }}</span>
              <span class="t">{{ data?.[1]?.thirdimagetitle }}</span>
            </div>
          </router-link>
        </div>
        <router-link :to="{ name: this.nav?.[1]?.rote }" class="detail">
          <div class="text">查看详情</div>
          <img class="ic" src="../../../assets/image/home/ic_right.png" />
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      data: null,
      nav: [],
    };
  },

  mounted() {
    //获取本地菜单
    // this.nav = this.$utils.getNavChild("productQualityIndex");
    this.nav.push(this.$utils.getNavClass("productQuality"));
    this.nav.push(this.$utils.getNavClass("productMannage"));
    this.getData();
  },
  methods: {
    async getData() {
      try {
        //获取文图
        const result = await this.$request.get(
          "/productquality/productQuality",
          {
            params: {},
          }
        );
        this.data = result.data;
      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.productQualityM {
  display: none;
}

.productQualityPc {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f8f8f8;

  .home {
    margin-top: 37px;
    width: 1200px;
    padding-bottom: 86px;

    .top-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      .name {
        position: absolute;
        top: 112px;
        left: 67px;
        font-size: 36px;

        font-weight: 500;
        color: #ffffff;
      }

      .en {
        position: absolute;
        top: 162px;
        left: 67px;
        font-size: 22px;

        font-weight: 400;
        color: #ffffff;
      }

      .h-img {
        width: 1200px;
        height: 371px;
      }

      .content {
        margin-top: -132px;
        width: 1109px;
        padding-bottom: 30px;
        // height: 407px;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url(../../../assets/image/productQuality/white-bg.png);
        display: flex;
        flex-direction: column;
        align-items: center;

        .text {
          //
          box-sizing: border-box;
          width: 100%;
          // height: 130px;
          // padding: 36px 100px 1px  36px;
          padding-top: 40px;
          padding-left: 36px;
          padding-right: 36px;
          box-sizing: border-box;

          display: flex;
          justify-content: center;
          white-space: pre-wrap;
          font-size: 16px;

          font-weight: 400;
          line-height: 26px;
          color: #333333;
        }

        .category {
          display: flex;
          width: 100%;
          margin-top: 16px;
          box-sizing: border-box;
          padding: 0 36px;
          justify-content: space-between;

          .item {
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 492px;
            height: 215px;

            .t {
              overflow: hidden;
              height: 50px;
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 24px;
              font-weight: bold;
              color: #ffffff;

              background: #33333377;
            }
          }
        }
      }

      .detail {
        cursor: pointer;
        margin-top: 45px;
        display: flex;
        align-items: center;

        .text {
          font-size: 18px;

          font-weight: 400;
          color: color.$base;
          line-height: 20px;
        }

        .ic {
          object-fit: fill;
          margin-left: 10px;
          width: 16px;
          height: 16px;
        }
      }
    }

    .bottom-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      .name {
        position: absolute;
        top: 112px;
        left: 67px;
        font-size: 36px;

        font-weight: 500;
        color: #ffffff;
      }

      .en {
        position: absolute;
        top: 162px;
        left: 67px;
        font-size: 22px;

        font-weight: 400;
        color: #ffffff;
      }

      .h-img {
        width: 1200px;
        height: 371px;
      }

      .product-box {
        margin-top: -132px;
        width: 1109px;
        height: 311px;
        display: flex;
        justify-content: space-between;

        .item {
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
          cursor: pointer;
          width: 359px;
          height: 311px;

          .text {
            margin-top: 200px;
            display: flex;
            width: 300px;
            flex-direction: column;
            border-bottom: 1px solid color.$base;
            box-sizing: border-box;
            padding-left: 20px;

            .t {
              font-size: 24px;

              font-weight: bold;
              color: #666666;
            }

            .e {
              font-size: 18px;

              font-weight: 400;
              color: #bfbfbf;
            }
          }
        }
      }

      .detail {
        cursor: pointer;
        margin-top: 45px;
        display: flex;
        align-items: center;

        .text {
          font-size: 18px;

          font-weight: 400;
          color: color.$base;
          line-height: 20px;
        }

        .ic {
          object-fit: fill;
          margin-left: 10px;
          width: 16px;
          height: 16px;
        }
      }
    }
  }
}
</style>
<style scoped lang="scss" >
@media screen and (max-width: 1200px) {
  .productQualityPc {
    display: none;
  }

  .productQualityM {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f8f8f8;

    .home {
      margin-top: fn.rpx(37);
      width: fn.rpx(750);
      padding-bottom: fn.rpx(30);

      .top-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;

        .name {
          position: absolute;
          top: fn.rpx(112);
          left: fn.rpx(67);
          font-size: fn.rpx(36);

          font-weight: 500;
          color: #ffffff;
        }

        .en {
          position: absolute;
          top: fn.rpx(162);
          left: fn.rpx(67);
          font-size: fn.rpx(22);

          font-weight: 400;
          color: #ffffff;
        }

        .h-img {
          width: fn.rpx(700);
          height: fn.rpx(371);
        }

        .content {
          margin-top: fn.rpx(-132);
          width: fn.rpx(660);
          padding-bottom: fn.rpx(50);
          // height: fn.rpx(770);
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
          background-image: url(../../../assets/image/productQuality/m-white-bg.png);
          display: flex;
          flex-direction: column;
          align-items: center;

          .text {
            width: fn.rpx(580);
            // height: fn.rpx(170);
            // padding: fn.rpx(20) fn.rpx(40) 0 fn.rpx(20);
            padding-top: fn.rpx(40);
            box-sizing: border-box;
            overflow: hidden;
            display: flex;
            justify-content: center;
            white-space: pre-wrap;
            font-size: fn.rpx(16);
            color: #333333;
            line-height: fn.rpx(26);
          }

          .category {
            display: flex;
            width: 100%;

            box-sizing: border-box;
            flex-direction: column;
            align-items: center;

            .item {
              margin-top: fn.rpx(20);
              background-size: 100% 100%;
              background-position: center;
              background-repeat: no-repeat;
              display: flex;
              justify-content: center;
              align-items: center;
              width: fn.rpx(580);
              height: fn.rpx(255);
              box-sizing: border-box;

              .t {
                overflow: hidden;
                height: fn.rpx(60);
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: fn.rpx(24);

                font-weight: bold;
                color: #ffffff;
                background: #33333377;
                // background: #f00;
              }
            }
          }
        }

        .detail {
          cursor: pointer;
          margin-top: fn.rpx(45);
          display: flex;
          align-items: center;

          .text {
            font-size: fn.rpx(18);

            font-weight: 400;
            color: color.$base;
            line-height: 20px;
          }

          .ic {
            object-fit: fill;
            margin-left: fn.rpx(10);
            width: fn.rpx(16);
            height: fn.rpx(16);
          }
        }
      }

      .bottom-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;

        .name {
          position: absolute;
          top: fn.rpx(112);
          left: fn.rpx(67);
          font-size: fn.rpx(36);

          font-weight: 500;
          color: #ffffff;
        }

        .en {
          position: absolute;
          top: fn.rpx(162);
          left: fn.rpx(67);
          font-size: fn.rpx(22);

          font-weight: 400;
          color: #ffffff;
        }

        .h-img {
          width: fn.rpx(700);
          height: fn.rpx(371);
        }

        .product-box {
          margin-top: fn.rpx(-132);
          width: fn.rpx(660);

          display: flex;
          justify-content: space-between;

          .item {
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            cursor: pointer;
            width: fn.rpx(207);
            height: fn.rpx(207);

            .text {
              margin-top: fn.rpx(60);
              display: flex;
              width: fn.rpx(180);
              flex-direction: column;
              border-bottom: 1px solid color.$base;
              box-sizing: border-box;
              padding-left: fn.rpx(20);
              padding-bottom: fn.rpx(15);

              .t {
                margin-top: fn.rpx(10);
                font-size: fn.rpx(24);

                font-weight: bold;
                color: #666666;
              }

              .e {
                height: fn.rpx(60);
                display: flex;
                flex-direction: column-reverse;
                width: fn.rpx(75);
                font-size: fn.rpx(16);

                font-weight: 400;
                color: #bfbfbf;
              }
            }
          }
        }

        .detail {
          cursor: pointer;
          margin-top: fn.rpx(45);
          display: flex;
          align-items: center;

          .text {
            font-size: fn.rpx(18);

            font-weight: 400;
            color: color.$base;
            line-height: fn.rpx(20);
          }

          .ic {
            object-fit: fill;
            margin-left: fn.rpx(10);
            width: fn.rpx(16);
            height: fn.rpx(16);
          }
        }
      }
    }
  }
}
</style>